<template>
  <Page class="bg-[#f5f5f5] min-h-screen">
    <PageHeader title="收入提现明细" :showBack="true" />
    
    <!-- Tab切换 -->
    <view class="bg-white px-[32rpx] py-[24rpx]">
      <view class="flex bg-[#f5f5f5] rounded-[16rpx] p-[4rpx]">
        <view
          v-for="(tab, index) in tabs"
          :key="index"
          class="flex-1 text-center py-[16rpx] rounded-[12rpx] text-[28rpx] font-medium transition-all duration-200"
          :class="activeTab === index ? 'bg-white text-[#165DFF] shadow-sm' : 'text-[#666]'"
          @click="activeTab = index"
        >
          {{ tab.name }}
        </view>
      </view>
    </view>

    <!-- 统计信息 -->
    <view class="bg-white mx-[24rpx] mt-[24rpx] rounded-[24rpx] p-[32rpx] shadow-sm">
      <view class="text-center">
        <text class="text-[26rpx] text-[#666] block mb-[12rpx]">
          {{ activeTab === 0 ? '累计收入' : '累计提现' }}
        </text>
        <text class="text-[40rpx] font-bold text-[#165DFF]">
          ¥{{ activeTab === 0 ? totalIncome : totalWithdraw }}
        </text>
      </view>
    </view>

    <!-- 列表内容 -->
    <view class="mx-[24rpx] mt-[24rpx]">
      <view v-if="loading" class="flex justify-center items-center h-[200rpx]">
        <view class="text-[28rpx] text-[#999]">加载中...</view>
      </view>
      
      <view v-else-if="currentList.length === 0" class="bg-white rounded-[24rpx] p-[80rpx] text-center">
        <view class="text-[28rpx] text-[#999] mb-[16rpx]">暂无记录</view>
        <view class="text-[24rpx] text-[#ccc]">
          {{ activeTab === 0 ? '还没有收入记录' : '还没有提现记录' }}
        </view>
      </view>
      
      <view v-else class="space-y-[16rpx]">
        <view
          v-for="(item, index) in currentList"
          :key="index"
          class="bg-white rounded-[24rpx] p-[32rpx] shadow-sm"
        >
          <view class="flex justify-between items-start mb-[16rpx]">
            <view>
              <view class="text-[30rpx] font-bold text-[#222] mb-[8rpx]">
                {{ item.title }}
              </view>
              <view class="text-[24rpx] text-[#666]">
                {{ item.description }}
              </view>
            </view>
            <view class="text-right">
              <view class="text-[32rpx] font-bold mb-[8rpx]"
                    :class="activeTab === 0 ? 'text-green-500' : 'text-red-500'">
                {{ activeTab === 0 ? '+' : '-' }}¥{{ item.amount }}
              </view>
              <view class="text-[22rpx] text-[#999]">
                {{ item.status }}
              </view>
            </view>
          </view>
          
          <view class="flex justify-between items-center text-[24rpx] text-[#999]">
            <text>{{ item.time }}</text>
            <text>订单号：{{ item.orderNo }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <view v-if="currentList.length > 0 && hasMore" class="text-center py-[32rpx]">
      <nut-button
        size="small"
        type="default"
        class="border-[#165DFF] text-[#165DFF] bg-transparent rounded-[20rpx] px-[36rpx] py-[12rpx]"
        @click="loadMore"
        :loading="loadingMore"
      >
        {{ loadingMore ? '加载中...' : '加载更多' }}
      </nut-button>
    </view>
  </Page>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue';
import Taro from '@tarojs/taro';
import { post } from '@/utils/request';
import PageHeader from '@/components/PageHeader.vue';
import { showToast } from '@tarojs/taro';

/**
 * 收入提现明细页面
 * @description 显示收入、提现记录列表，支持分页加载
 * @performance 虚拟滚动优化，分页加载减少内存占用
 */

const tabs = [
  { name: '收入', key: 'income' },
  { name: '提现', key: 'withdraw' }
];

const activeTab = ref(0);
const loading = ref(true);
const loadingMore = ref(false);
const hasMore = ref(true);
const page = ref(1);
const pageSize = 10;

// 统计数据
const totalIncome = ref('0.00');
const totalWithdraw = ref('0.00');

// 列表数据
const incomeList = ref<any[]>([]);
const withdrawList = ref<any[]>([]);

// 当前显示的列表
const currentList = computed(() => {
  return activeTab.value === 0 ? incomeList.value : withdrawList.value;
});

/**
 * 加载数据
 */
const loadData = async (isLoadMore = false) => {
  if (isLoadMore) {
    loadingMore.value = true;
  } else {
    loading.value = true;
    page.value = 1;
  }

  try {
    // 模拟数据
    const mockIncomeData = [
      {
        title: "任务完成收入",
        description: "超市导购任务 - 周末2天",
        amount: "360.00",
        status: "已完成",
        time: "2024-01-15 18:30",
        orderNo: "T202401150001"
      },
      {
        title: "悬赏任务收入",
        description: "小程序功能优化",
        amount: "1200.00",
        status: "已完成",
        time: "2024-01-12 14:20",
        orderNo: "T202401120003"
      },
      {
        title: "推广佣金收入",
        description: "推荐用户注册奖励",
        amount: "50.00",
        status: "已完成",
        time: "2024-01-10 09:15",
        orderNo: "T202401100002"
      }
    ];

    const mockWithdrawData = [
      {
        title: "微信提现",
        description: "提现到微信钱包",
        amount: "500.00",
        status: "处理中",
        time: "2024-01-14 16:45",
        orderNo: "W202401140001"
      },
      {
        title: "支付宝提现",
        description: "提现到支付宝",
        amount: "800.00",
        status: "已完成",
        time: "2024-01-08 11:30",
        orderNo: "W202401080002"
      },
      {
        title: "银行卡提现",
        description: "提现到工商银行",
        amount: "1200.00",
        status: "已完成",
        time: "2024-01-05 10:20",
        orderNo: "W202401050003"
      }
    ];

    // 模拟接口延迟
    await new Promise(resolve => setTimeout(resolve, 500));

    if (activeTab.value === 0) {
      if (isLoadMore) {
        incomeList.value.push(...mockIncomeData);
      } else {
        incomeList.value = mockIncomeData;
      }
      totalIncome.value = "1,610.00";
    } else {
      if (isLoadMore) {
        withdrawList.value.push(...mockWithdrawData);
      } else {
        withdrawList.value = mockWithdrawData;
      }
      totalWithdraw.value = "2,500.00";
    }

    hasMore.value = false; // 模拟数据只有一页
    if (hasMore.value) {
      page.value++;
    }
  } catch (error) {
    showToast({ title: '网络错误', icon: 'error' });
  } finally {
    loading.value = false;
    loadingMore.value = false;
  }
};

/**
 * 加载更多
 */
const loadMore = () => {
  if (!hasMore.value || loadingMore.value) return;
  loadData(true);
};

/**
 * Tab切换处理
 */
const handleTabChange = () => {
  if (activeTab.value === 0 && incomeList.value.length === 0) {
    loadData();
  } else if (activeTab.value === 1 && withdrawList.value.length === 0) {
    loadData();
  }
};

// 监听Tab切换
watch(activeTab, handleTabChange);

onMounted(() => {
  loadData();
});
</script> 